﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../../src/test.css" rel="stylesheet" />
	<script src="../../../vendor/js/jquery.js"></script>
	<script src="../../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>开关控件</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>开关默认样式</h5>
			<p>
				<input ud2="switch" /> 未选中&nbsp;
				<input ud2="switch" value="1" /> 选中
			</p>

			<hr class="hr" />

			<h5>禁用样式</h5>
			<p>
				<input ud2="switch" ud2-switch-disabled="1" /> 未选中&nbsp;
				<input ud2="switch" value="1" disabled /> 选中
			</p>

			<hr class="hr" />

			<h5>颜色样式</h5>
			<p>
				<input ud2="switch" class="c-red" value="1" /> 红色&nbsp;
				<input ud2="switch" class="c-blue" value="1" /> 蓝色&nbsp;
				<input ud2="switch" class="c-green" value="1" /> 绿色&nbsp;
				<input ud2="switch" class="c-orange" value="1" /> 橙色&nbsp;
				<input ud2="switch" class="c-yellow" value="1" /> 黄色&nbsp;
				<input ud2="switch" class="c-violet" value="1" /> 紫蓝色&nbsp;
				<input ud2="switch" class="c-pink" value="1" /> 粉色&nbsp;
				<input ud2="switch" class="c-brown" value="1" /> 棕色&nbsp;
				<input ud2="switch" class="c-purple" value="1" />紫色&nbsp;
				<input ud2="switch" class="c-teal" value="1" /> 天蓝色&nbsp;
				<input ud2="switch" class="c-dark" value="1" /> 深色&nbsp;
				<input ud2="switch" class="c-grey" value="1" /> 灰色
			</p>

			<hr class="hr" />

			<h5>尺寸方案</h5>
			<p>
				<input ud2="switch" class="c-red lg" value="1" /> 大号&nbsp;
				<input ud2="switch" class="c-blue" value="1" /> 中号&nbsp;
				<input ud2="switch" class="c-green sm" value="1" /> 小号&nbsp;
			</p>
		</div>
	</fieldset>

</body>
</html>
